{extend name="layout/base"}

{block name="content"}
<div class="layui-setBox" style="margin: 30px 0 100px 0">
    <form class="layui-form layui-form-pane1" action="" lay-filter="first">
        <div class="layui-form-item">
            <label class="layui-form-label">商户名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="mername" placeholder="商户名称" value="{$reMer.mername}" autocomplete="off"
                       class="layui-input">
                <input type="text" class="layui-input layui-hide" value="{$reMer.merid}" name="merid">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">服务分类：</label>
            <div class="layui-input-inline">
                <select name="cate_id" lay-verify="required">
                    {foreach $cate as $key=>$vo }
                    <option value="{$vo.cid}">{$vo.title}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属区域：</label>
            <div class="layui-input-inline">
                <select name="area_id" lay-verify="required">
                    {foreach $area as $key=>$vo }
                    {if $vo.area_id == $reMer.area_id }
                    <option value="{$vo.area_id}" selected>{$vo.area_title}</option>
                    {else /}
                    <option value="{$vo.area_id}">{$vo.area_title}</option>
                    {/if}
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">营业时间：</label>
            <div class="layui-input-inline">
                <input type="text" name="open" value="{$reMer.open}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">停业时间：</label>
            <div class="layui-input-inline">
                <input type="text" name="close" value="{$reMer.close}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">折扣：</label>
            <div class="layui-input-inline">
                <input type="number" name="discount" value="{$reMer.discount}" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">只能输入数字类型</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商户手机：</label>
            <div class="layui-input-inline">
                <input type="text" name="mobile" value="{$reMer.mobile}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">服务电话：</label>
            <div class="layui-input-inline">
                <input type="text" name="tel" value="{$reMer.tel}" autocomplete="off" class="layui-input">
            </div>
        </div>
        {php}$titleimgs =$images = explode(',',$reMer['title_img']);
        if($reMer['title_img']==""||$reMer['title_img']==NULL){
        echo '
        <div class="layui-form-item imgline layui-hide">';
            }else{
            echo '
            <div class="layui-form-item imgline">';
                }
                {/php}
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block imglist">
                    {foreach $titleimgs as $vo }
                    <div class="imglist_div">
                        <img src="{$vo}" alt="">
                        <span class="imglist_close" onclick="delimg(this)"><i
                                class="layui-icon layui-icon-close-fill"></i></span>
                    </div>
                    {/foreach}
                </div>
            </div>
            {php} if(count($titleimgs)==3){
            echo '
            <div class="layui-form-item layui-hide">';
                }else{
                echo '
                <div class="layui-form-item">';
                    }
                    {/php}
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-inline" style="width: 80%;">
                        <div id="uploader">
                            <div id="filePicker">选择图片</div>
                        </div>
                        <div class="statusBar">
                            <div id="fileList" class="uploader-list"></div>
                            <div class="webuploadBtn">
                                <div class="info"></div>
                                <div class="layui-btn layui-btn-normal btn" id="submitupload">开始上传</div>
                                <div id="filePicker2" class="layui-btn layui-btn-normal btn"></div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">营业地址：</label>
                    <div class="layui-input-inline" style="width: 80%">
                        <input type="text" name="address" value="{$reMer.address}" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-inline" style="width: 80%">
                        <input type="text" name="introduction" value="{$reMer.introduction}" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">详情</label>
                    <div class="layui-input-inline" style="width: 80%">
                        <textarea class="layui-textarea" name="content" value="{$reMer.content}"
                                  autocomplete="off">{$reMer.content}</textarea>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        {switch $reMer.status}
                        {case -1}
                        <input type="radio" name="status" value="-1" title="未开通" checked>
                        <input type="radio" name="status" value="2" title="开通">
                        <input type="radio" name="status" value="3" title="打烊">
                        <input type="radio" name="status" value="4" title="冻结">
                        <input type="radio" name="status" value="5" title="永久关门">
                        {/case}
                        {case 2}
                        <input type="radio" name="status" value="-1" title="未开通">
                        <input type="radio" name="status" value="2" title="开通" checked>
                        <input type="radio" name="status" value="3" title="打烊">
                        <input type="radio" name="status" value="4" title="冻结">
                        <input type="radio" name="status" value="5" title="永久关门">
                        {/case}
                        {case 3}
                        <input type="radio" name="status" value="-1" title="未开通">
                        <input type="radio" name="status" value="2" title="开通">
                        <input type="radio" name="status" value="3" title="打烊" checked>
                        <input type="radio" name="status" value="4" title="冻结">
                        <input type="radio" name="status" value="5" title="永久关门">
                        {/case}
                        {case 4}
                        <input type="radio" name="status" value="-1" title="未开通">
                        <input type="radio" name="status" value="2" title="开通">
                        <input type="radio" name="status" value="3" title="打烊">
                        <input type="radio" name="status" value="4" title="冻结" checked>
                        <input type="radio" name="status" value="5" title="永久关门">
                        {/case}
                        {case 5}
                        <input type="radio" name="status" value="-1" title="未开通">
                        <input type="radio" name="status" value="2" title="开通">
                        <input type="radio" name="status" value="3" title="打烊">
                        <input type="radio" name="status" value="4" title="冻结">
                        <input type="radio" name="status" value="5" title="永久关门" checked>
                        {/case}
                        {default /}
                        <input type="radio" name="status" value="-1" title="未开通" checked>
                        <input type="radio" name="status" value="2" title="开通">
                        <input type="radio" name="status" value="3" title="打烊">
                        <input type="radio" name="status" value="4" title="冻结">
                        <input type="radio" name="status" value="5" title="永久关门">
                        {/switch}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">地图标注：</label>
                    <div class="layui-input-inline" style="width: 80%;border: 1px solid #c9c9c9">
                        <div id="container" style="min-width:400px;min-height:600px;"></div>
                        <input type="text" name="latitude" value="{$reMer.latitude}" autocomplete="off"
                               class="layui-input layui-hide">
                        <input type="text" name="longitude" value="{$reMer.longitude}" autocomplete="off"
                               class="layui-input layui-hide">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
    </form>
</div>
<script src="/static/layui/layui.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=5UIBZ-OLR33-WKJ3S-YGJW2-EKB2F-XDB6B"></script>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/webuploader-0.1.5/webuploader.js"></script>
<!-- <script src="/static/webuploader-0.1.5/upload.js"></script> -->
<script>
    layui.use(['jquery', 'form', 'upload'], function () {
        var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload;
        $('.statusBar').hide()
        var lat = $("input[name='latitude']").val()
        var long = $("input[name='longitude']").val()
        var markersArray = []
        var flg = 0;
        var map = new qq.maps.Map(document.getElementById("container"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(40.8064033900658, 111.64924621582035),
            zoom: 11,
            draggableCursor: 'crosshair'
        });
        var marker = new qq.maps.Marker({
            //设置Marker的位置坐标
            position: new qq.maps.LatLng(lat, long),
            //设置显示Marker的地图
            map: map
        });
        flg = 1
        markersArray.push(marker)
        qq.maps.event.addListener(map, 'click', function (event) {
            var lat = event.latLng.getLat(), long = event.latLng.getLng();
            if (flg > 0) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
            marker = new qq.maps.Marker({
                position: new qq.maps.LatLng(lat, long),
                map: map
            });
            markersArray.push(marker)
            form.val('first', {
                'latitude': lat,
                'longitude': long
            });
            flg++;
        });

        var merid = $("input[name='merid']").val()
        //图片删除
        window.delimg = function (obj) {
            var that = obj,
                $this = $(that),
                imgsrc = $this.prev('img').attr('src')
            $.ajax({
                type: "post",
                url: '/manager/merchant/delfile',
                data: {
                    merid: merid,
                    path: imgsrc
                },
                dataType: 'json',
                beforeSend: function (res) {
                    index = layer.load(2);
                },
                success: function (res) {
                    if (res.code == 0) {
                        layer.close(index);
                        $this.parents('.imglist_div').remove()
                        layer.msg(res.msg, {time: 1000, icon: 6});
                        var $img = $this.parents('.imglist').find('.imglist_div')
                        if (!$img.length) {
                            $this.parents('.imgline').remove()
                        }
                    } else {
                        layer.msg(res.msg, {time: 2000, icon: 5});
                        layer.close(index);
                    }

                },
                error: function (res) {
                    layer.close(index);
                }
            })
        }
        //监听提交
        form.on('submit(submitBtn)', function (data) {
            $.ajax({
                url: '/manager/merchant/edit',
                type: 'post',
                data: data.field,
                success: function (res) {
                    if (res.code == 0) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layui.table.reload('table');
                        parent.layer.close(index);   
                    }

                },
                error: function (res) {

                }
            })
            return false;
        });

        /*百度上传图片*/
        var uploader = WebUploader.create({
            duplicate: true,
            auto: false,
            swf: '/static/webuploader-0.1.5/Uploader.swf',
            server: "/manager/merchant/uploads?merid=" + merid,
            pick: "#filePicker",
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png',
            },
            threads: 1,   //线程数          
            fileSingleSizeLimit: 2 * 1024 * 1024,//单个文件大小限制
            fileNumLimit: 3,//上传文件数量限制
            compress: false,//上传前不压缩
            // chunked: true
        });
        var flag = true

        //当有一批文件加载进队列时触发事件
        var fileCount = 0, fileSize = 0, text = '';
        uploader.on("fileQueued", function (file) {
            $('.statusBar').show()
            var $list = $("#fileList")
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="infos" >' + file.name + '</div>' +
                '<div class="file-panel">' +
                '<span class="cancel" style="color:red;font-size:12px"><i class="layui-icon layui-icon-close-fill"></i></span>' +
                '</div>' +
                '</div>'
                ),
                $img = $li.find('img');
            $list.append($li);
            $('#filePicker').css('display', 'none')
            uploader.addButton({
                id: '#filePicker2',
                label: '继续添加'
            });

            // 创建缩略图
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, 100, 100);
            //统计图片数
            fileCount++;
            fileSize += file.size;
            text = '选中' + fileCount + '张图片，共' + WebUploader.formatSize(fileSize) + '(最多可选3张)。';
            $(".statusBar .info").html(text)
            // 删除按钮
            $('.cancel').click(function () {
                var isTrue = $(this).parents('.file-item').find('.success'),
                    $this = $(this)
                if (!isTrue.length) {
                    var id = $this.parents('.file-item').attr('id');
                    uploader.removeFile(id, true)
                    $this.parents('.file-item').remove()
                    fileCount--;
                    if (fileCount == 0) {
                        $('#filePicker').css('display', 'block')
                        $('.statusBar').css('display', 'none')
                    }
                    fileSize -= file.size;
                    text = '选中' + fileCount + '张图片，共' + WebUploader.formatSize(fileSize) + '。';
                    $(".statusBar .info").html(text)
                } else {
                    var imgsrc = $this.parents('.file-item').find('.imgpath').data('src')
                    $.ajax({
                        type: "post",
                        url: '/manager/merchant/delfile',
                        data: {
                            merid: merid,
                            path: imgsrc
                        },
                        dataType: 'json',
                        beforeSend: function (res) {
                            index = layer.load(2);
                        },
                        success: function (res) {
                            if (res.code == 0) {
                                layer.close(index);
                                var id = $this.parents('.file-item').attr('id');
                                uploader.removeFile(id, true)
                                $this.parents('.file-item').remove()
                                fileCount--;
                                if (fileCount == 0) {
                                    $('#filePicker').css('display', 'block')
                                    $('.statusBar').css('display', 'none')
                                }
                                fileSize -= file.size;
                                text = '选中' + fileCount + '张图片，共' + WebUploader.formatSize(fileSize) + '。';
                                $(".statusBar .info").html(text)
                            } else {
                                layer.msg(res.msg, {time: 2000, icon: 5});
                                layer.close(index);
                            }

                        },
                        error: function (res) {
                            layer.close(index);
                        }
                    })
                }

            })
        });
        $('#submitupload').click(function () {
            uploader.upload()
        })
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id)
            var $percent = $li.find('.layui-progress');
            // 避免重复创建
            if ($percent.length <= 0) {
                $percent = $('<div class="layui-progress"><span class="data"></span></br>' + '<div class="layui-progress-bar"></div>' + '</div>').appendTo($li)
            }
            $li.find('.layui-progress').find('.layui-progress-bar').css('width', percentage * 100 + '%');
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            var $li = $('#' + file.id),
                $success = $li.find('div.success');

            // 避免重复创建
            if (!$success.length) {
                $success = $('<div class="success"></div>').appendTo($li);
            }
            $success.text('上传成功');
            $('<div class="imgpath" data-src=' + response.data.filepath + '></div>').appendTo($li)
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.layui-progress').remove();
        });

    });

</script>
{/block}
